<template>

      <div class="page-bar">
        <ul>
          <li>
            <a v-on:click="btnClick(1)">首页</a>
          </li>
          <li v-if="currentPage>1">
            <a v-on:click="currentPage--,pageClick()">上一页</a>
          </li>
          <li v-if=" currentPage==1">
            <a class="banclick">上一页</a>
          </li>
          <li v-for="index in indexs" :key="index" :class="{ 'active':  currentPage == index}">
            <a v-on:click="btnClick(index)">{{ index }}</a>
          </li>
          <li v-if=" currentPage!=totalPage">
            <a v-on:click="currentPage++,pageClick()">下一页</a>
          </li>
          <li v-if=" currentPage == totalPage">
            <a class="banclick">下一页</a>
          </li>
          <li>
            <a v-on:click="btnClick(totalPage)">尾页</a>
          </li>
        </ul>
      </div>
  

</template>
 
 
 <script>
export default {
  data() {
    return {
     productList: [{}], //所有数据
      totalPage: 1, // 统共页数，默认为1
      currentPage: 1, //当前页数 ，默认为1
      pageSize: 5, // 每页显示数量
      currentPageData: [] //当前页显示内容
    };
  },
  // props:[" totalPage",'currentPage',' pageSize'],
  created() {
    this.setCurrentPageData();
    //  this.handleValue()
  },
  mounted() {
    this.setCurrentPageData();

  },
  props:["url"],
  methods: {
    // 设置当前页面数据，对数组操作的截取规则为[0~10],[10~20]...,
    setCurrentPageData() {
      this.$api
        .get(`http://api.museum24h.com/myidea10/api/list/${this.url}-1-1000000`)
        .then(res => {
          // 计算一共有几页
          this.totalPage = Math.ceil(this.productList.length / this.pageSize);

          // 计算得0时设置为1
          this.totalPage = this.totalPage == 0 ? 1 : this.totalPage;
          this.productList = res.data.page.list;
          this.productList.splice(0, 1);
          let begin = (this.currentPage - 1) * this.pageSize;
          let end = this.currentPage * this.pageSize;
          // console.log(this.productList);
          // console.log(begin);
          // console.log(end)
          this.currentPageData = this.productList.slice(begin, end);
       
           this.$emit('child',this.currentPageData)
   
        });
    },
  handleValue(val){
    // this.$emit('child',this.currentPageData)
    // console.log(this.currentPageData)
  },
    btnClick: function(data) {
      //页码点击事件
      if (data != this.currentPage) {
        this.currentPage = data;
      }
      this.page = data;
      this.setCurrentPageData();
    },
    pageClick() {
      this.page = this.currentPage;
      this.setCurrentPageData();
    }
  },
  computed: {
    indexs() {
      var left = 1;
      var right = this.totalPage;
      var ar = [];
      if (this.totalPage >= 3) {
        if (this.currentPage > 2 && this.currentPage < this.totalPage - 1) {
          left = this.currentPage - 1;
          right = this.currentPage + 1;
        } else {
          if (this.currentPage <= 2) {
            left = 1;
            right = 3;
          } else {
            right = this.totalPage;
            left = this.totalPage - 2;
          }
        }
      }
      while (left <= right) {
        ar.push(left);
        left++;
      }
      return ar;
    }
  },
  watch:{}
};
</script>
<style scoped>
/* fenye */
.page-bar {
  margin: 16px auto;
  margin-top: 60px;
}
ul,
li {
  margin: 0px;
  padding: 0px;
}
li {
  list-style: none;
}
.page-bar ul {
  width: 620px;
  height: 40px;

  display: flex;
  margin: auto;
}
.page-bar li:first-child > a {
  margin-left: 0px;
}
.page-bar a {
  border: 1px solid rgb(190, 190, 190);
  text-decoration: none;
  position: relative;
  padding: 4px 12px;

  margin-left: -1px;

  color: #5d6062;
  cursor: pointer;
  margin-right: 20px;
}
.page-bar a:hover {
  background-color: #eee;
}
.page-bar a.banclick {
  cursor: not-allowed;
}
.page-bar .active a {
  color: #fff;
  cursor: default;
  background-color: rgb(78, 105, 161);
  border-color: rgb(78, 105, 161);
}
.page-bar i {
  font-style: normal;
  color: rgb(78, 105, 161);
  margin: 0px 4px;
  font-size: 12px;
}
</style>